import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { Empty } from 'antd';

// 初始化option
const initOption = (data, type) => {
    const seriesData = data.map(item => {
        // 2：职位
        if (type === '2') {
            return { value: item.workNum, name: item.postName };
        }
        return { value: item.workNum, name: item.departmentName };
    });
    return {
        color: ['#FFA22D', '#FFC069', '#FFC069', '#FFE7BA'],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}人  {d}%',
            textStyle: {
                fontSize: 12
            },
            position(pos, params, dom, rect, size) {
                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                const obj = { top: 60 };
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                return obj;
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    borderWidth: 2,
                    borderColor: '#fff'
                },
                data: seriesData
            }
        ]
    };
};

// 人员分布饼图表
const EmployeeDistPie = ({ data = [], type = '1' }) => (
    <>
        {data.length > 0 ? (
            <div style={{ position: 'relative', height: '100%' }}>
                <div
                    style={{
                        position: 'absolute',
                        zIndex: 1,
                        textAlign: 'center',
                        color: 'rgba(51,51,51,0.35)',
                        left: 0,
                        top: '50%',
                        transform: 'translateY(-50%)',
                        width: '100%'
                    }}
                >
                    <div style={{ fontWeight: 600, color: 'rgba(51, 51, 51, 0.85)', fontSize: 24 }}>
                        {data[0].allNum}
                        <span style={{ fontWeight: 500, fontSize: 10 }}>人</span>
                    </div>
                    <div style={{ fontWeight: 400, fontSize: 12 }}>总人数</div>
                </div>
                <div style={{ position: 'relative', zIndex: 100, height: '100%' }}>
                    <ReactEcharts style={{ height: '100%' }} option={initOption(data, type)} />
                </div>
            </div>
        ) : (
            <div
                style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                <Empty />
            </div>
        )}
    </>
);

export default EmployeeDistPie;
